变量和常量

知识点

声明变量我们优先使用哪个？
- const
- 有了变量先给 const，如果发现它后面是要被修改的，再改为 let
为什么 const 声明的对象可以修改里面的属性？
- 因为对象是引用类型，里面存储的是地址，只要地址不变，就不会报错
- 建议数组和对象使用 const 来声明
什么时候使用 let 声明变量？
- 如果基本数据类型的值或者引用类型的地址发生变化的时候，需要用 let
- 比如一个变量进行加减运算，比如 for 循环中的 i++

变量

变量是什么

知识点

变量是怎么理解？
计算机中用来存储数据的 "容器"，简单理解是一个个的盒子。
变量有什么作用呢？
用来存放数据的。注意变量指的是容器而不是数据。
你还能想到那些生活中的变量？
HTML 标签、教室、宿舍

变量是计算机中用来存储数据的 "容器"，它可以让计算机变得有记忆，通俗的理解变量就是使用【某个符号】来代表【某个具体的数值】（数据）

注意

变量不是数据本身，它们仅仅是一个用于存储数值的容器。可以理解为是一个个用来装东西的纸箱子。
获取数据是指：通过变量名来获得变量里面的数据。

// x 符号代表了 5 这个数值
x = 5;
// y 符号代表了 6 这个数值
y = 6;

//举例：在 JavaScript 中使用变量可以将某个数据（数值）记录下来！
// 将用户输入的内容保存在 num 这个变量（容器）中
num = prompt("请输入一数字！");
// 通过 num 变量（容器）将用户输入的内容输出出来
alert(num);
document.write(num);

变量基本使用

知识点

变量用什么关键字来声明？
let（推荐），var
变量通过什么符号来赋值？
= 也称为赋值运算符
开发中我们经常声明的同时可以直接赋值？
let str = "hello world!"; 声明和赋值同时进行，这种操作也称为 变量初始化
变量赋值之后如何更新新值？
直接给它一个不同的值来更新它
我们提倡同时声明多个不同的变量吗？
不提倡，可读性不好

目标：能够声明一个变量并完成赋值操作

变量的声明
变量的赋值

声明变量

声明 (定义) 变量有两部分构成：声明关键字、变量名（标识）

// let 变量名
// 声明 (定义) 变量有两部分构成：声明关键字、变量名（标识）
// let 即关键字，所谓关键字是系统提供的专门用来声明（定义）变量的词语
// age 即变量的名称，也叫标识符
let age;

// 声明多个变量：多个变量中间用逗号隔开
// 看上去代码长度更短，但并不推荐这样
// 为了更好的可读性，请一行只声明一个变量
let age, uname;

关键字是 JavaScript 中内置的一些英文词汇（单词或缩写），它们代表某些特定的含义，如 let 的含义是声明变量的，看到 let 后就可想到这行代码的意思是在声明变量，如 let age;

let 和 var 的区别

都是 JavaScript 中的声明变量的关键字，推荐使用 let 声明变量！！！

作用域：
- var 声明的变量的作用域是函数级别的（函数内部可见）。
- let 声明的变量的作用域是块级别的（花括号内可见）。
变量提升：
- 使用 var 声明的变量会被提升到函数作用域的顶部，这意味着在函数内的任何位置都可以访问该变量，即使在声明之前也可以。
- 使用 let 声明的变量不会被提升，这意味着必须在声明后才能访问该变量。
同名变量：
- 如果在同一作用域内使用相同名称的 var 声明变量，则会覆盖以前的声明。
- 使用 let 声明变量时，如果尝试重新定义一个已经存在的变量，则会引发错误。
全局变量：
- 在全局作用域中声明的变量（使用 var 或未声明的变量）将成为全局对象的属性。
- 使用 let 声明的变量不会成为全局对象的属性。

总之，let 比 var 更加安全且易于维护，因此建议在开发时优先使用 let。

变量赋值

声明（定义）变量相当于创造了一个空的 "容器"，通过赋值向这个容器中添加数据。

// 声明 (定义) 变量有两部分构成：声明关键字、变量名（标识）
// let 即关键字，所谓关键字是系统提供的专门用来声明（定义）变量的词语
// age 即变量的名称，也叫标识符
let age;

// 赋值，将 18 这个数据存入了 age 这个“容器”中
age = 18;

// 这样 age 的值就成了 18
document.write(age);

// 也可以声明和赋值同时进行，这种操作也称为 变量初始化。
let str = "hello world!";
alert(str);

更新变量

变量赋值后，还可以通过简单地给它一个不同的值来更新它。

var x = 5;
x = 10; // x 的值现在是 10

注意事项

let 不允许多次声明一个变量。

变量的本质

内存：计算机中存储数据的地方，相当于一个空间
变量本质：是程序在内存中申请的一块用来存放数据的小空间

关键字

JavaScript 使用专门的关键字 let 和 var 来声明（定义）变量，在使用时需要注意一些细节。

使用 let 时的注意事项

允许声明和赋值同时进行
不允许重复声明
允许同时声明多个变量并赋值
JavaScript 中内置的一些关键字不能被当做变量名

使用 var 时的注意事项

允许声明和赋值同时进行
允许重复声明
允许同时声明多个变量并赋值

大部分情况使用 let 和 var 区别不大，但是 let 相较 var 更严谨，因此推荐使用 let，后期会更进一步介绍二者间的区别。

变量名命名规则

关于变量的名称（标识符）有一系列的规则需要遵守：

只能是字母、数字、下划线 _、$，且不能能数字开头
字母区分大小写，如 Age 和 age 是不同的变量
JavaScript 内部已占用于单词（关键字或保留字）不允许使用
尽量保证变量具有一定的语义，见字知义
一般使用小驼峰命名法。第一个单词首字母小写，后面每个单词首字母大写。例：userName

注意

所谓关键字是指 JavaScript 内部使用的词语，如 let 和 var，保留字是指 JavaScript 内部目前没有使用的词语，但是将来可能会使用词语。

let age = 18; // 正确
let age1 = 18; // 正确
let _age = 18; // 正确

// let 1age = 18; // 错误，不可以数字开头
let $age = 18; // 正确
let Age = 24; // 正确，它与小写的 age 是不同的变量
// let let = 18; // 错误，let 是关键字
let int = 123; // 不推荐，int 是保留字

常量

知识点

let — 现在实际开发变量声明方式。
var — 以前的声明变量的方式，会有很多问题。
const — 类似于 let，但是变量的值无法被修改。

const PI = 3.14;

概念：使用 const 声明的变量称为 "常量"。
使用场景：当某个变量永远不会改变的时候，就可以使用 const 来声明，而不是 let。
命名规范：和变量一致。

注意

常量不允许重新赋值。
声明的时候必须赋值（初始化）。

// 常量不允许重新赋值
const PI = 3.14;
PI = 3.1415926; // 抛出 TypeError 错误

// 声明的时候必须赋值（初始化）
const PI; // 抛出 SyntaxError 错误
PI = 3.14;

小技巧

不需要重新赋值的数据使用 const（防止意外的修改）。
使用常量可以提高代码的可读性和可维护性。因为常量的值不能被修改，所以它们的含义始终保持不变，这有助于其他程序员更好地理解你的代码。

案例

需求：用户输入商品价格和商品数量，以及收货地址，可以自动打印订单信息
分析：
- 需要输入 3 个数据，所以需要 3 个变量来存储 price num address;
- 需要计算总的价格 total;
- 页面打印生成表格，里面填充数据即可;
- 记得最好使用模板字符串;
- 因为 prompt 获取过来的是字符型，所以会出现字符相加的问题。prompt 如果出现相加记得要转为数字型，可以利用 + 最简单。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      h2 {
        text-align: center;
      }

      table {
        margin: 20px auto;
        text-align: center;
        border-collapse: collapse;
      }

      th,
      td {
        padding: 10px;
        border: 1px solid #000;
      }
    </style>
  </head>
  <body>
    <h2>订单确认</h2>
    <script>
      let price = prompt("请输入商品价格：");
      if (!price) price = 1999;

      let num = prompt("请输入商品数量：");
      if (!num) num = 2;

      let address = prompt("请输入收获地址：");
      if (!address) address = "武汉黑马程序员 pink 老师收";

      let total = price * num;

      document.write(`
  <table>
    <tr>
      <th>商品名称</th>
      <th>商品价格</th>
      <th>商品数量</th>
      <th>总价</th>
      <th>收货地址</th>
    </tr>
    <tr>
      <td>小米手机青春 PLUS</td>
      <td>${price}元</td>
      <td>${num}</td>
      <td>${total}元</td>
      <td>${address}</td>
    </tr>
  </table>
`);
    </script>
  </body>
</html>